<template>
  <div class="Dite">
    <li @click="showPopup"><van-icon name="location-o" /> 收货地址</li>
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
    >
      <p class="my_set_title">收货地址</p>
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
    </van-popup>

    <!-- 编辑地址 -->
    <van-popup
      v-model="show2"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
    >
      <p class="my_set_title">编辑地址</p>

      <van-address-edit
        :area-list="areaList"
        show-delete
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
      />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      areaList,
      chosenAddressId: "1",
      show: false,
      show2: false,
      list: [
        {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true,
        },
      ],
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    showPopup2() {
      this.show2 = true;
    },
    onAdd() {
      this.showPopup2();
    },
    onEdit(item, index) {
      this.showPopup2(index);
    },
    // 保存地址
    onSave(content) {
      Toast("保存成功");
      this.list.push({
        id: "2",
        name: content.name,
        tel: content.tel,
        address: `${content.province}${content.city}${content.county}${content.addressDetail}`,
        isDefault: false,
      });
      content = "";
    },
    // 删除地址
    onDelete() {
      Toast("delete");
    },
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";
.my_set_title {
  text-align: center;
  height: 15vw;
  line-height: 15vw;
  font-size: 5.5vw;
  background-color: #eee;
}
</style>